<template>
  <el-form-item :label="label" :prop="prop" v-if="fla">
    <el-input
      v-model="value"
      :disabled="disabled"
      :clearable="clearable"
      :placeholder="placeholder"
      spellcheck="false"></el-input>
  </el-form-item>
</template>

<script>
export default {
  name: "TextInput",
  props: {
    // 显示标签
    label: {
      type: String,
      default() {
        return ''
      }
    },
    // 表单验证字段名
    prop: {
     type: String,
     default() {
       return ''
     }
    },
    // 输入提示
    placeholder: {
      type: String,
      default() {
        return '请输入' + this.label.replace(/[:：]/,'')
      }
    },
    // 清空按钮
    clearable: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 清空表单标志位
    clearFla: Boolean,
    // 是否可用
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 默认数据
    defaultValue: String
  },
  data() {
    return {
      // 输入的数据
      value: '',
      fla: true,
    }
  },
  watch: {
    // 通知父组件修改对应数据
    value() {
      this.$emit('valueChangeEvent',this.prop,this.value)
    },
    clearFla() {
      this.value = this.defaultValue || ''
    },
  },
  methods: {
    // 隐藏此formItem
    hiddenItem() {
      this.$emit('valueChangeEvent',this.prop,'')
      this.fla = false
    },
    // 显示此formItem
    showItem() {
      this.fla = true
    }
  },
  mounted() {
    // 设置value，使用事件形式
    this.$on('setValue', (prop,newValue) => {
      if (prop == this.prop){
        // 添加默认数据
        this.value = newValue
      }
    })
  }
}
</script>

<style scoped>

</style>
